<script setup lang="ts">
import { ref, computed } from 'vue'
import FamilyCard from './FamilyCard.vue'

interface Family {
  id: string
  name: string
  location: string
  description: string
  avatar: string
  memberCount: number
}

const props = defineProps<{
  families: Family[]
  showPagination?: boolean
  pageSize?: number
}>()

const emit = defineEmits<{
  apply: [familyId: string]
}>()

const currentPage = ref(1)
const pageSize = computed(() => props.pageSize || 4)

const totalPages = computed(() => 
  Math.ceil(props.families.length / pageSize.value)
)

const paginatedFamilies = computed(() => {
  if (!props.showPagination) return props.families
  
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return props.families.slice(start, end)
})

function handlePageChange(page: number) {
  currentPage.value = page
}

function handleApply(familyId: string) {
  emit('apply', familyId)
}
</script>

<template>
  <div class="family-card-list">
    <div class="cards-grid">
      <FamilyCard 
        v-for="family in paginatedFamilies" 
        :key="family.id"
        :family="family"
        @apply="handleApply"
      />
    </div>
    
    <el-pagination
      v-if="showPagination && totalPages > 1"
      v-model:current-page="currentPage"
      :page-size="pageSize"
      :total="families.length"
      layout="prev, pager, next"
      class="pagination"
      @current-change="handlePageChange"
    />
  </div>
</template>

<style lang="scss" scoped>
.family-card-list {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.15);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
  margin-bottom: 30px;
}

.pagination {
  display: flex;
  justify-content: center;
  
  :deep(.el-pager li) {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #d4af37;
    color: #5d4037;
    
    &:hover {
      background: rgba(136, 166, 142, 0.1);
      border-color: #88a68e;
    }
    
    &.is-active {
      background: #88a68e;
      border-color: #88a68e;
      color: white;
    }
  }
  
  :deep(.btn-prev),
  :deep(.btn-next) {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #d4af37;
    color: #5d4037;
    
    &:hover {
      background: rgba(136, 166, 142, 0.1);
      border-color: #88a68e;
    }
  }
}

@media (max-width: 768px) {
  .family-card-list {
    padding: 20px;
  }
  
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
</style>
